import React from "react";
import "./index.less";
import Nav from "@pages/nav";
import PortalContainer from "@components/portalContainer";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper";
import "swiper/less";
import "swiper/less/pagination";
import slide1Img from "@images/slide1.png";
import slide2Img from "@images/slide2.png";
import slide3Img from "@images/slide3.png";
import qrcodeInnerLogo from "@images/logo.jpg";
import { QRCodeCanvas } from "qrcode.react";

// const cateList = [
//   { name: '电子产品', path: 'electronics' },
//   { name: '家用电器', path: 'homeAppliances' },
//   { name: '办公用品', path: 'officeSupplies' },
//   { name: '学习用品', path: 'schoolThings' },
//   { name: '穿搭相关', path: 'wearMatch' },
//   { name: '零食百货', path: 'snackDepartment' },
// ]

const Mall = () => {
    return (
        <div className="mall">
            <Nav />
            <p className="p1">买卖闲置物品，请扫码登录app页面进行交易哦~</p>
            <div className="mall_main">
                <div className="mall_content">
                    <div className="qrCode" id="qrCode">
                        <QRCodeCanvas
                            value={`${window.location.origin}/m/mall/goodsRecommend`}
                            size={200}
                            includeMargin
                            level="H"
                            imageSettings={{
                                src: qrcodeInnerLogo,
                                width: 40,
                                height: 40,
                                excavate: true,
                            }}
                        />
                    </div>
                    <Swiper
                        modules={[Autoplay, Pagination]}
                        direction="vertical"
                        style={{ height: "100%" }}
                        autoplay={{
                            delay: 2500,
                            disableOnInteraction: false,
                        }}
                        loop
                        speed={1200}
                        pagination={{
                            clickable: true,
                            bulletClass: "my-bullet",
                            bulletActiveClass: "my-bullet-active",
                        }}
                    >
                        {[1, 2, 3].map((item, index) => {
                            return (
                                <SwiperSlide key={index}>
                                    <div className="slide_img">
                                        <img
                                            src={
                                                index === 0
                                                    ? slide1Img
                                                    : index === 1
                                                    ? slide2Img
                                                    : slide3Img
                                            }
                                            alt=""
                                        />
                                    </div>
                                </SwiperSlide>
                            );
                        })}
                    </Swiper>
                </div>
            </div>
            <PortalContainer />
        </div>
    );
};

export default Mall;
